{{define "content"}}
<div class="container-fluid">
    <div class="row px-lg-5 mb-4">
        <div class="col">
            <div class="d-flex w-100 justify-content-between">
                <div>
                    <h2 class="d-inline"># 物品清单</h2>
                    <small class="d-inline">【共 {{.total}} 个】</small>
                </div>
                <button style="width: auto;float: right;" type="button" class="btn btn-info btn-sm m-1"
                    onclick="window.location.href = '/item'">新增➕</button>
            </div>
        </div>
    </div>
    <div class="row px-lg-5 mb-4">
        <div class="input-group">
            <input id="search-text" type="text" class="form-control" placeholder="模糊搜索" aria-label="模糊搜索"
                aria-describedby="button-search" value="{{.search_text}}">
            <button class="btn btn-outline-secondary" type="button" id="button-search" onclick="doSearch();">搜索</button>
        </div>
    </div>
    <div class="row px-lg-5 mb-4">
        <div class="col">
            <div class="list-group">
                {{range .items }}
                <a href="/item?id={{.ID}}" class="list-group-item list-group-item-action">
                    <div class="d-flex w-100 justify-content-between">
                        <p class="fw-bold overflow-hidden mb-1">{{.BrandName}}</p>
                        <small>数量：{{.Amount}}</small>
                        <small class="text-muted">￥{{.Price}}</small>
                    </div>
                    <i class="mb-1">{{.ProductName}}</i>
                </a>
                {{end}}
            </div>
        </div>
    </div>
    <div class="row px-lg-5 mb-4">
        <div class="col-sm-5 col-md-3 col-lg-2">
            <select id="page-size" class="form-select form-select-sm float-end" onchange="setPageSize(this.value);">
                <option value="10" {{if eq 10 .page_size}}selected{{end}}>10条/页</option>
                <option value="30" {{if eq 30 .page_size}}selected{{end}}>30条/页</option>
                <option value="50" {{if eq 50 .page_size}}selected{{end}}>50条/页</option>
                <option value="100" {{if eq 100 .page_size}}selected{{end}}>100条/页</option>
            </select>
        </div>
        <div class="col">
            <div class="btn-group float-end" role="group">
                <button type="button" class="btn btn-info btn-sm" onclick="page_go('{{.prev}}');" {{if le .prev
                    0}}disabled{{end}}>上一页</button>

                <button id="page-list" type="button" class="btn btn-info btn-sm dropdown-toggle"
                    data-bs-toggle="dropdown" aria-expanded="false">
                    {{.page}}/{{.max_page}}
                </button>
                <ul class="dropdown-menu" aria-labelledby="page-list">
                    {{range .pages}}
                    <li><a class="dropdown-item" href="#" onclick="page_go('{{.value}}');">{{.value}}</a></li>
                    {{end}}
                </ul>
                <button type="button" class="btn btn-info btn-sm" onclick="page_go('{{.next}}');" {{if eq .next
                    0}}disabled{{end}}>下一页</button>
            </div>
        </div>

    </div>
</div>

<script>
    function page_go(page) {
        let newURL = "/items?page=" + page + "&pagesize=" + (window.localStorage.getItem("items-page-size") ? window.localStorage.getItem("items-page-size") : document.getElementById("page-size").value);
        let searchText = window.localStorage.getItem("items-page-search-text") ? window.localStorage.getItem("items-page-search-text") : document.getElementById("search-text").value;
        if (searchText != "") {
            newURL = newURL + "&searchtext=" + searchText;
        }
        window.location.href = newURL;
    }
    function setPageSize(value) {
        if (window.localStorage.getItem("items-page-size") != value) {
            window.localStorage.setItem("items-page-size", value)
            page_go(1);
        }
    }
    function doSearch() {
        let text = document.getElementById("search-text").value;
        if (window.localStorage.getItem("items-page-search-text") != text) {
            window.localStorage.setItem("items-page-search-text", text)
            page_go(1);
        }
    }
</script>

{{end}}